<script setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { onLoad } from '@dcloudio/uni-app'
import { request } from '@/request/request'
import { DOMAIN_NAME } from '@/request/config'

const { t } = useI18n()
const currentLang = ref(uni.getStorageSync('language') || 'zh')
const isUyghur = computed(() => currentLang.value === 'ug')
const userInfo = ref(uni.getStorageSync('aichat_user') || {})
const myAvatar = computed(() => userInfo.value.avatar ? DOMAIN_NAME + '/file/' + userInfo.value.avatar : '/static/avatar-ceeb03f6.jpg')
const otherAvatar = '/static/bot-bro.png'

// 聊天记录
const messages = ref([])

// 加载聊天记录
onLoad((options) => {
  if (options.chat_id) {
    request.get('ai/record', { chat_id: options.chat_id }).then(res => {
      if (res.code === 200 && res.data) {
        messages.value = res.data.map(item => ({
          text: item.content,
          isMine: item.source === 'user',
          timestamp: new Date(item.created_at).getTime()
        }))
      }
    })
  }
})

// 返回上一页
const backClick = () => {
  uni.navigateBack()
}

// 格式化时间戳
const formatTime = (timestamp) => {
  const date = new Date(timestamp)
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  return `${hours}:${minutes}`
}
</script>

<template>
  <tn-navbar backgroundColor="#fff" fixed>{{ t('chat.detail') }}
    <template #back>
      <tn-icon name="left" size="40" @click="backClick"></tn-icon>
    </template>
  </tn-navbar>

  <view class="chat-detail" :class="{ 'rtl': isUyghur }">
    <scroll-view scroll-y class="message-list">
      <view v-for="(message, index) in messages" :key="index" class="message-item"
        :class="{ 'message-mine': message.isMine }">
        <view class="message-time" v-if="index === 0 || messages[index - 1].timestamp - message.timestamp > 300000">
          {{ formatTime(message.timestamp) }}
        </view>
        <view class="message-content">
          <template v-if="!message.isMine">
            <image class="avatar" :src="otherAvatar" mode="aspectFill" />
            <view class="bubble">
              <text>{{ message.text }}</text>
            </view>
          </template>
          <template v-else>
            <image class="avatar" :src="myAvatar" mode="aspectFill" />
            <view class="bubble">
              <text>{{ message.text }}</text>
            </view>
          </template>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.chat-detail {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding: 20rpx;
  padding-top: 88rpx;

  &.rtl {
    direction: rtl;
  }
}

.message-list {
  height: calc(100vh - 108rpx);
}

.message-item {
  margin-bottom: 30rpx;

  .message-time {
    text-align: center;
    font-size: 24rpx;
    color: #999;
    margin-bottom: 20rpx;
  }

  .message-content {
    display: flex;
    align-items: flex-start;
    gap: 20rpx;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .bubble {
      max-width: 70%;
      padding: 20rpx;
      border-radius: 12rpx;
      background-color: #fff;
      word-break: break-all;

      text {
        font-size: 28rpx;
        color: #333;
        line-height: 1.5;
      }
    }
  }

  &.message-mine {
    .message-content {
      flex-direction: row-reverse;

      .bubble {
        background-color: #0066ff;

        text {
          color: #fff;
        }
      }
    }
  }
}
</style>